<template>
  <div class="table_list_fix">
    <!-- 扩展性内容 -->
    <slot name="content_context" />
    <pl-table
      ref="plTable"
      size="mini"
      :row-height="45"
      border="border"
      use-virtual
      v-loading="loading"
      :data="dataSource"
      :height="getTableHeight()"
      :max-height="maxTableHeight"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      @selection-change="selectionChange"
      :data-changes-scroll-top="false"
      @sort-change="handleSortChange"
    >
      <pl-table-column v-if="showSelectCol" fixed type="selection" width="55" />
      <template v-for="column in columns">
        <pl-table-column
          v-if="!column.children"
          :key="column.key"
          :prop="column.key"
          :label="column.title"
          :property="column.key"
          :align="column.align"
          :width="column.width || 120"
          :fixed="column.fixed"
          :formatter="column.formatter"
          :sortable="column.sortable"
          :show-overflow-tooltip="!column.notShowTip"
        >
          <template v-if="column.render" v-slot="scope">
            <!-- {{ scope.row.nowInput.profit }} -->
            <table-column
              :index="scope.$index"
              :row="scope.row"
              :col="scope.column"
              :render="column.render"
            />
          </template>
          <template v-else-if="column.errorTip" v-slot="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row[scope.column.property]" placement="top-start">
              <div class="costom_tooltip">{{ scope.row[scope.column.property] }}</div>
            </el-tooltip>
          </template>
          <template v-else-if="column.key === 'action'" v-slot="scope">
            <el-button type="text" size="small" @click="handleCancelSelect({ row: scope.row, index: scope.$index})">删除</el-button>
          </template>
          <!-- nowInput -->
          <template v-else-if="column.type === 'nowInput'" v-slot="scope">
            <el-input
              v-model.trim="scope.row.nowInput[scope.column.property]"
              :maxlength="32"
            />
          </template>
          <!-- nowInputNoLimit -->
          <template v-else-if="column.type === 'nowInputNoLimit'" v-slot="scope">
            <el-input
              v-model.trim="scope.row.nowInput[scope.column.property]"
            />
          </template>
          <!-- specialNowInputNumber -->
          <template v-else-if="column.type === 'specialNowInputNumber'" v-slot="scope">
            <input-number
              v-model="scope.row.nowInput[scope.column.property]"
              controls-position="right"
              :min="0"
              :max="99999999"
            />
          </template>
          <!-- specialNowInputNumberNoLimit -->
          <template v-else-if="column.type === 'specialNowInputNumberNoLimit'" v-slot="scope">
            <input-number
              v-model="scope.row.nowInput[scope.column.property]"
              controls-position="right"
              :max="99999999"
            />
          </template>
        </pl-table-column>
        <pl-table-column
          v-else
          :key="column.title"
          :label="column.title"
        >
          <pl-table-column
            v-for="child in column.children"
            :key="child.key"
            :prop="child.key"
            :label="child.title"
            :property="column.key"
            :align="child.align"
            :width="child.width || 120"
            :formatter="column.formatter"
            :show-overflow-tooltip="true"
          >
            <template v-if="child.render" v-slot="scope">
              <table-column
                :index="scope.$index"
                :row="scope.row"
                :col="scope.column"
                :render="child.render"
              />
            </template>
            <!-- nowInput -->
            <template v-else-if="child.type === 'nowInput'" v-slot="scope">
              <el-input
                v-model.trim="scope.row.nowInput[scope.column.property]"
              />
            </template>
            <!-- nowInputNoLimit -->
            <template v-else-if="child.type === 'nowInputNoLimit'" v-slot="scope">
              <el-input
                v-model.trim="scope.row.nowInput[scope.column.property]"
              />
            </template>
            <!-- nowInputNumChange -->
            <template v-else-if="child.type === 'nowInputNumChange'" v-slot="scope">
              <el-input-number
                v-model="scope.row.nowInput[scope.column.property]"
                controls-position="right"
                :min="0"
                :max="99999999"
                @change="((val)=>{ handleRowChange({ row: scope.row, val, columnName: scope.column.property, index: scope.$index }) })"
              />
            </template>
            <!-- specialNowInputNumber -->
            <template v-else-if="child.type === 'specialNowInputNumber'" v-slot="scope">
              <input-number
                v-model="scope.row.nowInput[scope.column.property]"
                controls-position="right"
                :min="0"
                :max="99999999"
              />
            </template>
          </pl-table-column>
        </pl-table-column>
      </template>
      <pl-table-column
        align="center"
        v-if="showActionCol"
        :fixed="actionColFixed"
        :min-width="actionColWidth"
        :label="actionColLabel">
        <template slot-scope="scope">
          <table-column
            :index="scope.$index"
            :row="scope.row"
            :col="scope.column"
            :render="actionRender"
          />
        </template>
      </pl-table-column>
    </pl-table>
    <!-- table表格 -->

    <!-- 分页部分 -->
    <div v-if="showPagination" class="pagination-container">
      <el-pagination
        :total="total"
        :current-page="pagination.pageNum"
        :page-sizes="[50, 100, 500, 1000]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handlePageChange"
        @size-change="handlePageSize"
      />
    </div>
    <div v-if="!showPagination">
      <span class="total-num">共 {{ dataSource.length || 0 }} 条</span>
    </div>
  </div>
</template>

<script>
import tableColumn from '../tableColumn';
import inputNumber from '@/components/inputNumber/inputNumber'
import { handleSortCompare } from '@/utils/bizUtils'

export default {
  name: 'BasicList',
  components: {
    tableColumn,
    inputNumber
  },
  props: {
    dataSource: {
      type: Array,
      default () {
        return [];
      },
    },
    columns: {
      type: Array,
      default () {
        return [];
      },
    },
    actionColFixed: {
      type: [Boolean, String],
      default: 'right',
    },
    showActionCol: {
      type: Boolean,
      default: false,
    },
    tableHeight: {
      type: Number,
      default: 600,
    },
    maxTableHeight: { // 表格最大高度
      type: Number,
      default: null
    },
    actionColWidth: {
      type: Number,
      default: 100,
    },
    actionColLabel: {
      type: String,
      default: '操作',
    },
    actionRender: {
      type: Function,
      default: () => {},
    },
    showSelectCol: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showPagination: {
      type: Boolean,
      default: false,
    },
    pagination: {
      type: Object,
      default () {
        return {};
      },
    },
    total: {
      type: Number,
      default: 0,
    },
    selectionChange: {
      type: Function,
      default: () => {},
    },
  },

  data () {
    return {
      multipleSelection: [],
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.$emit('toggleRowSelection', this.$refs.multipleTable);
    });
  },
  methods: {
    getTableHeight () {
      return this.maxTableHeight ? null : this.tableHeight;
    },
    handleRowChange (data) {
      this.$emit('handleRowChange', data);
    },
    handleCancelSelect (data) {
      this.$emit('handleCancelSelect', data);
    },
    handlePageChange (current) {
      this.$emit('pageChange', current);
    },
    handlePageSize (length) {
      this.$emit('pageSizeSelect', length);
    },
    // 排序
    handleSortChange ({ prop, order }) {
      this.dataSource.sort(handleSortCompare(prop, order))
    }
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table thead.is-group th {
  background: #fff;
}
.pagination-container {
    text-align: right;
    padding-right: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

/deep/ .el-table {
   .el-table__fixed { // 左固定列
    height: auto !important;
    bottom: 18px;
  }
   .el-table__fixed-right { // 右固定列
    height: auto !important;
    bottom: 18px;
  }
}
.total-num {
  margin-top: 5px;
  float: right;
}
</style>
